import React, { useContext, useMemo } from 'react';
import { Drawer } from '@inbiz/antd';
import { TableDrawerProps } from '../../interfaces';
import { DrawerProps } from 'antd/lib/drawer';
import '../../style.less';
import Actions from './Actions';
import { InBizTableCtx } from '../../context';
import { getMessage } from '@inbiz/react';

const TableDrawer = (props: TableDrawerProps) => {
  const { title, visible, openMode, actions, width, height, onClose, render, pageRef, ...rest } = props;
  const { columnConfig } = useContext(InBizTableCtx);
  const prefixCls = 'inbiz-table-drawer';
  const rednerFooter = useMemo(() => {
    return (
      <div style={{ width: '100%', textAlign: columnConfig?.formItems?.position || 'right' }}>
        <Actions className={'drawer-buttons'} actions={actions} displayQty={100} pageRef={pageRef} />
      </div>
    );
  }, [actions]);
  return (
    <div>
      <Drawer
        className={prefixCls}
        title={getMessage(title)}
        placement={openMode as DrawerProps['placement']}
        onClose={onClose}
        visible={visible}
        width={width}
        height={height}
        maskClosable={false}
        footer={rednerFooter}
        {...rest}
      >
        {render}
      </Drawer>
    </div>
  );
};

export default React.memo(TableDrawer);
